<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .d {
            width: 1000px;
            height: 240px;
            background-color: #ddd;
            margin: auto;
        }

        .d1 {
            width: 500px;
            height: 240px;
            float: left;
            /* background-color: #ff0; */
        }

        .d2 {
            width: 240px;
            height: 240px;
            float: left;
            /* background-color: rgb(92, 92, 72); */
        }

        .d3 {
            width: 260px;
            height: 240px;
            float: left;
            background-color: #ff0;
        }

        .d h3 {
            line-height: 63px;
            margin-top: 12px;
            padding-left: 22px;
            font-size: 18px;
            color: #555;
            background-color: pink;
        }

        .d1 li {
            line-height: 24px;
            font-size: 12px;
        }

        .d1 li span {
            float: right;
            margin-right: 27px;
        }

        .d2 p {
            line-height: 24px;
            font-size: 12px;
            margin-left: 22px;
            margin-right: 22px;
            margin-top: 10px;
        }

        .d2 .d2-p2 {
            color: #999;
        }

        .d3 p {
            line-height: 24px;
            font-size: 12px;
            margin-left: 22px;
            margin-right: 54px;
            margin-top: -13px;
        }


        .e {
            width: 1000px;
            height: 306px;
            margin: auto;
            /* background-color: #ff0; */
            /* 解决margin_top传递的问题 */
            overflow: hidden;
        }

        .e h3 {
            margin-top: 10px;
            line-height: 57px;
            margin-left: 22px;
            font-size: 18px;
        }

        .e dd {
            width: 210px;
            height: 220px;
            float: left;
            /* background-color: #eee; */
            margin: 0 20px;
        }

        .e img {
            width: 210px;
            height: 136px;
            background-color: #f00;
        }

        .e p {
            line-height: 24px;
            font-size: 12px;
            margin-top: 12px;
        }

        .f {
            width: 1000px;
            height: 250px;
            margin: auto;
            background-color: #ededed;
        }

        .f1 {
            width: 453px;
            height: 250px;
            float: left;
            background-color: #ff0;
            margin-left: 20px;
        }

        .f2 {
            width: 151px;
            height: 250px;
            float: left;
            background-color: #ff0;
            margin-left: 51px;
        }

        .f3 {
            width: 253px;
            height: 250px;
            float: left;
            background-color: #ff0;
            margin-left: 53px;
        }

        .f h3 {
            margin-top: 20px;
            line-height: 37px;
            margin-left: 12px;
        }

        .f hr {
            margin-bottom: 12px;
        }

        .f dd {
            height: 170px;
            float: left;
            background-color: #ddd;
        }

        .f dd p {
            line-height: 24px;
            font-size: 12px;
        }

        .f1-dd1 {
            width: 150px;
        }

        .f1-dd2 {
            width: 193px;
        }

        .f1-dd3 {
            width: 110px;
        }
    </style>
</head>

<body>

    <!-- 
        作遇到的问题
            第三个板块   标题写炸了
            第五个板块  飘挂了    
            margin  没生效  

        
     -->





    <!-- 新闻中心 -->
    <div class="d">
        <div class="d1">
            <h3>哈哈哈哈</h3>
            <ul>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊111啊 <span>2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊22222啊啊 <span>2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span>2022-22-22</span></li>
            </ul>
        </div>
        <div class="d2">
            <h3>哈哈哈哈</h3>
            <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或</p>
            <p class="d2-p2">哈哈哈哈哈哈哈哈哈哈或或或或或或或或</p>
        </div>
        <div class="d3">
            <h3>哈哈哈哈</h3>
            <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或</p>
        </div>
    </div>
    <!-- 新闻中心 -->

    <div class="e">
        <h3>市场项目</h3>
        <dl>
            <dd>
                <img src="" alt="">
                <p>少时诵诗书所所所所所所所所所所所所所所所所所所所所所</p>
            </dd>
            <dd>
                <img src="" alt="">
                <p>少时诵诗书所所所所所所所所所所所所所所所所所所所所所</p>
            </dd>
            <dd>
                <img src="" alt="">
                <p>少时诵诗书所所所所所所所所所所所所所所所所所所所所所</p>
            </dd>
            <dd>
                <img src="" alt="">
                <p>少时诵诗书所所所所所所所所所所所所所所所所所所所所所</p>
            </dd>
        </dl>
    </div>


    <!-- 产品中心 -->
    <div class="f">
        <div class="f1">
            <h3>产品中心</h3>
            <hr>
            <dl>
                <dd class="f1-dd1">
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                </dd>
                <dd class="f1-dd2">
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                </dd>
                <dd class="f1-dd3">
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                </dd>
            </dl>
        </div>
        <div class="f2">
            <h3>产品中心</h3>
            <hr>
            <dl>
                <dd class="f1-dd1">
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                    <p> &gt; 什么电机</p>
                </dd>
            </dl>

        </div>
        <div class="f3">
            <h3>产品中心</h3>
            <hr>
        </div>
    </div>

</body>

</html>